!{include file='common/iheader.htm'}
<style>
	.img_selector_btn{margin-left:10px;}
	#img_selector_images .img_wrap{padding:2px;border:1px solid transparent;border-radius:4px;margin-bottom:10px;margin-right:4px;position:relative;}
	#img_selector_images .img_wrap .img_index{position:absolute;top:0;left:0;color:#FF9900;font-size:14px;font-weight:bold;}
	#img_selector_images .img_wrap:hover{border-color:#2694E8;background:white;box-shadow:0 1px 2px #2694E8 inset, 0 0 8px #2694E8;outline:0 none;}
	.frame_add{display:inline-block;padding-top:35px;margin-left:10px;}
	.frame_add span{display:inline-block;width:48px;height:48px;background:url(!{res file='manager/images/add_icon.png'}) no-repeat;}
</style>
<div id="i_nav">
	<h3 class="page_title">360度产品展示编辑</h3>
	<a class="button" href="/manager.php?app=show_360">360度产品展示管理</a>
</div>
<p class="tips ui-state-highlight ui-corner-all">
	1. 创建产品，带<span class="red">*</span>项为必填项！
	!{if $smarty.request.id}
	<br>
	2. 上传产品各角度图片，建议使用24帧以上！<br>
	3. 点击产品帧图片重新上传，点击加号添加帧，图片处理需要一点时间，请耐心等待
	!{/if} 
</p>
<form action="/manager.php?app=show_360&act=edit" method="post" id="show_360_form">
<div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
	<ul class="tabs_title">
		<li><a href="#tab_show_360_0">基本信息</a></li>
		!{if $show_360}
		<li><a href="#tab_show_360_1">帧</a></li>
		!{/if}
	</ul>
	<div class="tabs_content" id="tab_show_360_0">
		<div class="form_item form_item_text form_item_input_text">
			<strong><span class="red">*</span>产品名称：</strong>
			<input type="text" value="!{$show_360.name}" name="name" class="text_input">
		</div>
		<div class="form_item">
			<strong><span class="red">*</span>服务器选择：</strong>
			<select name="server">
				<option value='youyu'>人人有鱼</option>
				<option value='aliyun'>阿里云OSS</option>
			</select>
			<p>阿里云使用了CDN加速，但需要额外收取流量和存储费用</p>
		</div>
		<div class="form_item form_item_text form_item_input_text">
			<strong>外网ID：</strong>
			<div class="muti_val_item" id="outer_ids">
				!{foreach from=$show_360.out_ids item=outer name=c}
				!{if $smarty.foreach.c.index eq 0}
				<input type="text" value="!{$outer}" name="out_ids[]" class="outer_id_input text_input">
				!{else}
				<input type="text" value="!{$outer}" name="out_ids[]" class="text_input">
				!{/if}
				!{foreachelse}
				<input type="text" name="out_ids[]" class="text_input">
				!{/foreach}
			</div>
			<input type="button" class="button add_outer_id" value="添加">
			<p>用于与三方网站进行绑定</p>
		</div>
		<div class="form_item form_item_textarea form_item_textarea_normal">
			<strong>备注：</strong>
			<div><textarea name="desc" class="form_input">!{$show_360.desc}</textarea></div>
		</div>
	</div>
	!{if $show_360}
	<div class="tabs_content" id="tab_show_360_1">
		<div id="img_selector_images" class="form_item form_item_image form_item_image_multiple">
			<div class="picture_selector">
				!{foreach from=$show_360.images item=image name=sh}
				!{if $image}
				<img src="!{res file=$image thumb='100x100'}" class="frame delete_able" index="!{$smarty.foreach.sh.index}"/>
				!{else}
				<img src="!{res file='template/images/no_pic.jpg' thumb='100x100'}" class="frame no_pic" index="!{$smarty.foreach.sh.index}"/>
				!{/if}
				!{/foreach}
				<div class="frame_add"><span title="点击添加帧"></span></div>
			</div>
		</div>
	</div>
	!{/if}
</div>
<div class="form_item form_btn_item">
	<input type="hidden" name="id" value="!{$smarty.request.id}"/>
	<input type="button" value="保存" class="button submit_btn">
</div>
</form>
<script src="!{res file='js/jquery_plus/ajaxupload.js'}"></script>
<script>
	var frame_index = 0;
	var options = {
		action : '/manager.php?app=show_360&act=upload',
        name: 'imgFile',
        autoSubmit: true,
        onSubmit : function(file, ext){
        	if($(this._button).attr('index') == null){
        		frame_index = $('#img_selector_images .frame').length;
        	}else{
	        	frame_index = $(this._button).attr('index');
        	}
            if (ext && /^(jpg|png|jpeg|gif)$/i.test(ext)){
                this.setData({
                    'frame': frame_index,
                    'id' : '!{$smarty.request.id}'
                });
            } else {
                alert('非图片类型文件！');
                return false;              
            }
            show_loading();
            this.disable();
        },
        onComplete: function(file, response){
            var json = null;
            try{
	            json = eval('(' + response + ')');
            }catch(e){
            	alert('发生错误，请重试！');
            	this.enable();
                close_loading();
                return;
            }
            if(json.result){
				var img_path = json.data;
				
				
            	//上传成功
            	var new_img = $('<img class="frame delete_able" src="' + json.data + '" index="'+frame_index+'"/>');
            	if($('.frame[index="'+frame_index+'"]').length){
            		//修改
            		$('.frame[index="'+frame_index+'"]').after(new_img);
            		$('.frame[index="'+frame_index+'"]:eq(0)').remove();
            	}else{
	            	$("#img_selector_images .frame_add").before(new_img);
            	}
            	
            	$(new_img).auto_img({
            		on_delete : del_360_frame
            	});
            }else{
            	alert(json.info);
            }
            this.enable();
            close_loading();
        }
	};
	
	$(function(){
		$(".add_outer_id").click(function(){
			$("#outer_ids").append('<input type="text" name="out_ids[]" class="text_input">');
		});
		$('.frame').auto_img({
    		on_delete : del_360_frame,
    		ready : function(obj, i){
    			if($(obj).find('.no_pic').length){
	    			new AjaxUpload($(obj).find('img'), options);
    			}
    			$(obj).append('<span class="img_index">' + (i + 1) + '</span>');
    		}
    	});
		!{if $smarty.request.id}
		new AjaxUpload($("#img_selector_images .frame_add"), options);
		!{/if}
		$("#show_360_form").ajax_form({
			!{if !$smarty.request.id}
			'success' : function(form, data){
				window.location.href = '/manager.php?app=show_360&act=edit&id=' + data.data;
			},
			!{/if}
			'submit_btn' : '.submit_btn'
		});
	});
	
	function del_360_frame(index, img_wrap){
		show_loading();
		$.get('/manager.php?app=show_360&act=del_frame&id=!{$smarty.request.id}&index=' + index,function(r){
			var json = eval('('+r+')');
			if(json.result){
				//删除成功
				$(img_wrap).children().remove();
				var new_no_pic = $('<img class="frame" index="'+index+'" src="'+CACHED_URL+'/template/images/100x100/no_pic.jpg" style="margin-top: 1px;">');
				new AjaxUpload(new_no_pic, options);
				$(img_wrap).append(new_no_pic)
			}else{
				alert(json.info);
			}
			close_loading();
		});
	}
</script>
!{include file='common/ifooter.htm'}